<template>
    <filterComponent v-model:filter-data="filterData" showExport  @export="handleExport" :minWidth="300" @doSearch="handleSearch" />

    <el-card class="table-box">
        <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
            v-model:page-info="pageInfo" @pageChange="handlePageChange">
            <template #voucherUrl>
                <el-table-column label="产品类型" prop="type" width="120">
                    <template #default="scope">
                        <bigPicture text="点击查看" :imageUrl="scope.row.voucherUrl" />
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </el-card>
    <ExportDialog v-model:show="showDialog" :query="query"/>
</template>
<script setup lang="ts">
import { ref, onMounted, onActivated } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { cgetzhmxlistapi, getcompanyapi } from '@/api/api'
import { createQuery } from '@/utils/utils'
import ExportDialog from './export-dialog.vue'
import type { AccountDetailDto, AccountDetailReqDto } from '@/api/type'

const props = defineProps<{
    type: number
}>()

const filterData = ref({
    list: {
        companyId: {
            name: '客户名称',
            prop: 'companyId',
            value: '',
            noEmit: true,
            placeholder: '请选择',
            type: 'inputSelect',
            options: [],
            defaultAttrs: {
                label: 'companyName',
                value: 'id'
            },
            remoteMethod: async (val: string, item: any) => {
                if (!val.trim()) return
                const res = await getcompanyapi(val)
                item.options = res
            },
        },
        tradeTime: {
            name: '交易时间',
            prop: 'tradeTime',
            value: [],
            noEmit: true,
            type: 'date',
            dateType: 'daterange',
            propAttrs: {
                start: 'startTime',
                end: 'endTime'
            }
        },
        productType: {
            name: '产品筛选',
            prop: 'productType',
            type: 'select',
            value: '',
            noEmit: true,
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '子弹发薪',
                    value: 0
                },
                {
                    label: '长期保',
                    value: 3
                },
                {
                    label: '日日保',
                    value: 2
                },
                {
                    label: '电子签',
                    value: 1
                },
                {
                    label: '群发消息',
                    value: 6
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
        type: {
            name: '交易状态',
            prop: 'type',
            type: 'select',
            value: 4,
            noEmit: true,
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '转入',
                    value: 5
                },
                {
                    label: '转出',
                    value: 4
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        }
    },
    buttonList: [
        {
            name: '搜索',
            type: 'primary',
            icon: 'search',
            click: () => {
                pageInfo.value.pageNum = 1
                getList()
            }
        }
    ]
})


const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名',
        prop: 'companyName'
    },
    {
        label: '产品',
        prop: 'productType',
        map: {
            0: '子弹发薪',
            1: '电子签',
            2: '日日保',
            3: '长期保',
            6: '群发消息'
        }
    },
    {
        label: '交易金额',
        prop: 'operateAmount'
    },
    {
        label: '交易时间',
        prop: 'createTime'
    },
    {
        label: '转账方式',
        prop: 'payMode',
        map: {
            1: '公对公',
            2: '微信',
            3: '私对公',
            4: '赠送'
        }
    },
    {
        label: '交易类型',
        prop: 'type',
        map: {
            1: '充值',
            4: '余额转出',
            3: '提现',
            5: '转入'
        }
    },
    {
        label: '状态',
        prop: 'status',
        map: {
            0: '待审核',
            1: '已审核',
            2: '已驳回',
            3: '已提现',
            4: '已转出',
            5: '已转入',
        },
        colorMap: {
            0: '#9497b1',
            1: '#9497B1',
            2: '#E05F42',
            3: '#3E5FF5',
            4: '#3DB86D',
            5: '#FFA814',
        }
    },
])

const tableData = ref<AccountDetailDto[]>([])

const query = ref({} as AccountDetailReqDto)
const showDialog = ref(false)

const getList = async () => {
    query.value = createQuery(filterData.value.list)
    query.value.position = 1
    query.value.selectType = props.type
    query.value.payMode = ''
    const res = await cgetzhmxlistapi({
        ...query.value,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
    })
    tableData.value = res.list
    pageInfo.value.total = res.totalCount
}

const handlePageChange = () => {
    setTimeout(() => {
        getList()
    }, 0)
}

const handleSearch = (val: any) => {
    // console.log(111, getList);
    getList()
}

const handleRefresh = () => {
    // pageInfo.value.pageNum = 1
    getList()
}
const handleExport = () => {
    showDialog.value = true
}

onActivated(() => {
    getList()
})

</script>
<style lang="scss" scoped></style>